import React, {useReducer} from 'react';
// hooks是一个函数，该函数的名字以use开头
// hooks是可以让函数组件拥有类组件中的特征：ref state 生命周期
// useState:让函数组件拥有状态
//          const [state,setState] = useState(1);
// useRef:让函数组件拥有ref
//          const a = useRef();
// useCallback:可以让函数产生记忆。
//         const cb= useCallback(function(){},[])
// useMemo:可以让结果产生记忆。（类似于VUE 计算属性）
//          const result = useMemo(function(){},[a]);
// useContext:可以让函数组件进行跨组件传递参数。
//      src->context->index.js---> export default React.createContext();
//      Provider:提供者
//      Consumer:消费者
//      传递数据  <Provider value={向下传递的数据}>   </Provider>
//      接收数据  const state = useContext(globalContext);
// useReducer:是useState的另外一种解决方案。
//      const [state,dispatch] = useReducer(reducer函数，initState);
//      挂载时：
//           // 定义了一个名字为state的常量，值为{a:1,b:2}
//           // 定义了一个名字为dispatch的函数。
//           // dispatch({type:类型（一般大写），payload:荷载的数据});
//           const [state,dispatch]= useReducer(function(prevState,action){
//                // dispatch最终会执行到该函数。
//                // prevState是状态：指的是上一次该函数返回的结果，如果该函数未运行过，那么指的是初始值
//                // 返回的结果即是最新的数据状态
//                state = {...prevState} // {num:1}
//                state.a = 100;
//                return state;
//           },{a:1,b:2});

function App(props) {
    const [state,dispatch]  = useReducer(function(prevState,action){
        console.log(1111);
        const state = {...prevState};
        if(action.type === "ADD_ONE") state.a += action.payload;
        return state;
    },{
        a:1,
        b:2
    })
    return (
        <div>
            <h3>App</h3>
            <button onClick={()=>{
                dispatch({
                    type:"ADD_ONE",
                    payload:1
                });
            }}>点我</button>
            <p>a:{state.a}</p>
            <p>b:{state.b}</p>
        </div>
    );
}

export default App;